<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <span>总记录数: {{ total }} 条</span>
        </template>

        <template #right>
          <el-button
            type="warning"
            size="small"
            @click="$router.push('/import?=type=user')"
          >excel导入</el-button>
          <el-button
            type="danger"
            size="small"
            @click="exportExcel"
          >excel导出</el-button>
          <el-button
            type="primary"
            size="small"
            @click="addEmployeeFn"
          >新增员工</el-button>
        </template>
      </page-tools>
      <!-- 列表 -->
      <el-card
        v-loading="isLoading"
        style="margin-top: 10px"
      >
        <el-table
          border
          :data="employeeList"
        >
          <el-table-column
            label="序号"
            type="index"
            width="80px"
            :index="indexMethod"
          />
          <el-table-column
            label="姓名"
            prop="username"
          />
          <el-table-column
            label="手机号"
            prop="mobile"
          />
          <el-table-column
            label="工号"
            prop="workNumber"
          />
          <el-table-column
            label="聘用形式"
            prop="formOfEmployment"
            :formatter="formateData"
          />
          <el-table-column
            label="部门"
            prop="departmentName"
          />
          <el-table-column
            label="入职时间"
            prop="timeOfEntry"
          >
            <template #default="{row}">
              {{ formatTime( row.timeOfEntry) }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="280"
          >
            <template #default="{row}">
              <el-button
                type="text"
                size="small"
              >查看</el-button>
              <el-button
                type="text"
                size="small"
              >分配角色</el-button>
              <el-button
                type="text"
                size="small"
                @click="delEmployeesbtn(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination
            :current-page="page"
            :page-size="size"
            :page-sizes="[10, 20, 30, 40]"
            layout="total,sizes,prev, pager, next,jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 用$parent子组件使用父组件方法 必须把子组件写在最外层 -->
        <!-- 写在elcard里就找里面去了 -->
        <!-- 如果不小心写了就写两个$parent -->
        <add-employee :show-dialog.sync="showDialog" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { delEmployeesListApi, getEmployeesListApi } from '@/api/employees'
// 导入封装的聘用形式
import needhireType from '@/constant/employees'
import dayjs from 'dayjs'
import addEmployee from './components/add-employee.vue'
export default {
  name: 'Employees',
  components: { addEmployee },
  data() {
    return {
      page: 1,
      size: 10,
      employeeList: [],
      total: 0,
      isLoading: false,
      showDialog: false
    }
  },
  created() {
    this.getEmployeesList()
  },
  methods: {
    async getEmployeesList() {
      this.isLoading = true
      const { data } = await getEmployeesListApi(this.page, this.size)
      this.employeeList = data.rows
      this.total = data.total
      this.isLoading = false
    },
    /**
     * 页容量改变
     */
    handleSizeChange(val) {
      this.size = val
      this.getEmployeesList()
    },
    /**
     * 页码改变
     */
    handleCurrentChange(val) {
      this.page = val
      this.getEmployeesList()
    },
    indexMethod(index) {
      return (this.page - 1) * this.size + index + 1
      // return index + 1
    },
    // 处理聘用形式
    formateData(row, column, cellValue, index) {
      // cellvalue当前聘用形式对应的值
      const obj = needhireType.hireType.find((item) => item.id === +cellValue)
      return obj ? obj.value : '未知'
    },
    // 处理时间日期
    formatTime(time) {
      return dayjs(time).format('YYYY-MM-DD')
    },
    // 删除
    delEmployeesbtn(id) {
      this.$confirm('确定要删除吗？')
        .then(async() => {
          await delEmployeesListApi(id)
          if (this.page > 1 && this.employeeList.length === 1) {
            this.page--
          }
          this.$message.success('删除成功')
          this.getEmployeesList()
        })
        .catch(() => {})
    },
    // 点击增加显示弹层
    addEmployeeFn() {
      this.showDialog = true
    },
    // 处理导出表格
    async exportExcel() {
      // 导出的表头
      const headersArr = [
        '姓名',
        '手机号',
        '入职日期',
        '聘用形式',
        '转正日期',
        '工号',
        '部门'
      ]
      // 真实场景必须找后端调取新接口获取全部数据
      // 这里用的获取列表的数据 传total保证获取到所有的数据
      const {
        data: { rows }
      } = await getEmployeesListApi(1, this.total)
      const headersRelations = {
        姓名: 'username',
        手机号: 'mobile',
        入职日期: 'timeOfEntry',
        聘用形式: 'formOfEmployment',
        转正日期: 'correctionTime',
        工号: 'workNumber',
        部门: 'departmentName'
      }
    }
  }
}
</script>

<style>
</style>
